<template>
  <div class="breadcrumb-bar">
    <div class="breadcrumb-line"></div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item class="menu" :key="index" :to="item.path"
                          v-for="(item, index) in list">{{ item.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'breadcrumbBar',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
@import "/src/assets/scss/base.scss";

.breadcrumb-bar {
  height: 32px;
  padding-left: 20px;
  background: #F4F8FC;
  @include flex-row(1);

  .breadcrumb-line {
    width: 3px;
    height: 12px;
    background: linear-gradient(177deg, #61C1BE 0%, #3394E1 100%);
    margin-right: 4px;
  }

  ::v-deep .el-breadcrumb {
    .el-breadcrumb__inner {
      font-size: 12px;
      line-height: 20px;
      font-weight: normal;

      &.is-link {
        color: rgba(2, 21, 37, 0.55);
      }
    }

    .el-breadcrumb__separator[class*=icon] {
      margin: 0 4px;
    }

    .el-breadcrumb__item:last-child .el-breadcrumb__inner {
      color: #021525 !important;
    }
  }
}
</style>
